<template>
    <view class="l-class water-flow-container" v-if="data.length !== 0">
        <view class="water-column" :style="'margin-right:' + columnGap">
            <view id="left">
                <block v-for="(item, index) in leftData" :key="index">
                    <l-water-flow-item :data-item="item" @tap.native.stop.prevent="onTapItem($event, { item })" :data="item" />
                </block>
            </view>
        </view>
        <view class="water-column">
            <view id="right">
                <block v-for="(item, index) in rightData" :key="index">
                    <l-water-flow-item :data-item="item" @tap.native.stop.prevent="onTapItem($event, { item })" :data="item" />
                </block>
            </view>
        </view>
    </view>
</template>

<script>
import eventUtil from '../core/utils/event-util';
export default {
    data() {
        return {
            data: [],
            leftData: [],
            rightData: []
        };
    },
    props: {
        columnGap: {
            type: String,
            default: '20rpx'
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            this._init();
        },

        _init() {
            uni.lin = uni.lin || {};
            uni.lin.renderWaterFlow = (t = [], e = false, a) => {
                if ('[object Array]' !== Object.prototype.toString.call(t)) {
                    console.error('[data]参数类型错误，渲染失败');
                    return false;
                }
                this.setData({
                    data: t
                });
                if (e) {
                    this.leftData = [];
                    this.rightData = [];
                }
                this._select(t, e)
                    .then(() => {
                        if (a) {
                            a();
                        }
                    })
                    .catch((t) => {
                        console.error(t);
                    });
            };
        },

        _select(t, e) {
            const a = uni.createSelectorQuery().in(this);
            this.columnNodes = a.selectAll('#left, #right');
            return new Promise((a) => {
                this._render(t, 0, e, () => {
                    a();
                });
            });
        },

        _render(t, e, a, i) {
            if ((t.length > e || a) && 0 !== this.data.length) {
                this.columnNodes.boundingClientRect().exec((h) => {
                    const r = h[0];
                    this.leftHeight = r[0].height;
                    this.rightHeight = r[1].height;
                    if (this.leftHeight <= this.rightHeight || a) {
                        this.leftData.push(t[e]);
                    } else {
                        this.rightData.push(t[e]);
                    }
                    this.setData(
                        {
                            leftData: this.leftData,
                            rightData: this.rightData
                        },
                        () => {
                            this._render(t, ++e, false, i);
                        }
                    );
                });
            } else {
                if (i) {
                    i();
                }
            }
        },

        onTapItem(t) {
            eventUtil.emit(this, 'linitemtap', {
                item: t.currentTarget.dataset.item
            });
        }
    },
    created: function () {}
};
</script>
<style>
.water-flow-container {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    background: 0 0;
}
.water-column {
    flex: 1;
}
</style>
